<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Ionic App</title>
    <base href="./" />
    <meta name="color-scheme" content="light dark" />
    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    
    <link rel="icon" type="image/png" href="./ionic/assets/icon/favicon.png" />
    <link rel="apple-touch-icon" href="./ionic/assets/icon/favicon.png" />
    <link rel="apple-touch-icon" sizes="57x57" href="./ionic/assets/icon/favicon.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="./ionic/assets/icon/favicon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="./ionic/assets/icon/favicon.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="./ionic/assets/icon/favicon.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="./ionic/assets/icon/favicon.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="./ionic/assets/icon/favicon.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="./ionic/assets/icon/favicon.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="./ionic/assets/icon/favicon.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="./ionic/assets/icon/favicon.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="./ionic/assets/icon/favicon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="./ionic/assets/icon/favicon.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="./ionic/assets/icon/favicon.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="./ionic/assets/icon/favicon.png" />
    <link rel="manifest" href="./ionic/assets/icon/favicon.png" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <meta name="msapplication-TileImage" content="./ionic/assets/icon/favicon.png" />
    <meta name="theme-color" content="#ffffff" />
    
    <link href="./ionic/css/chunk-ionic.f5c8e0e3.css" rel="stylesheet">
    <link href="./ionic/css/app.7b141fc5.css" rel="stylesheet">
    
    <style>
        /* 调试样式 */
        .debug-overlay {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-size: 12px;
            z-index: 9999;
            max-width: 300px;
            max-height: 200px;
            overflow-y: auto;
        }
        .debug-status {
            margin: 2px 0;
        }
        .success { color: #4CAF50; }
        .error { color: #f44336; }
        .warning { color: #ff9800; }
    </style>
</head>

<body>
    <div id="app"></div>
    
    <!-- 调试信息显示 -->
    <div class="debug-overlay" id="debug-info">
        <div class="debug-status">🔄 初始化中...</div>
    </div>
    
    <script>
        console.log('=== Ionic Final Test Started ===');
        
        const debugInfo = document.getElementById('debug-info');
        let debugMessages = [];
        
        function addDebugMessage(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            debugMessages.push(`[${timestamp}] ${message}`);
            console.log(`Debug: ${message}`);
            
            const className = type === 'success' ? 'success' : type === 'error' ? 'error' : type === 'warning' ? 'warning' : '';
            debugInfo.innerHTML = debugMessages.slice(-10).map(msg => 
                `<div class="debug-status ${className}">${msg}</div>`
            ).join('');
        }
        
        // 监听所有错误
        window.addEventListener('error', function(e) {
            addDebugMessage(`❌ 错误: ${e.message}`, 'error');
        });
        
        window.addEventListener('unhandledrejection', function(e) {
            addDebugMessage(`❌ Promise 错误: ${e.reason}`, 'error');
        });
        
        addDebugMessage('✅ HTML 加载完成', 'success');
        
        // 检查 DOM
        document.addEventListener('DOMContentLoaded', function() {
            addDebugMessage('✅ DOM 准备就绪', 'success');
        });
        
        // 检查应用容器
        function checkAppContainer() {
            const app = document.getElementById('app');
            if (app) {
                addDebugMessage('✅ 应用容器找到', 'success');
                return true;
            } else {
                addDebugMessage('❌ 应用容器未找到', 'error');
                return false;
            }
        }
        
        // 监听 Vue 应用挂载
        let vueCheckCount = 0;
        function checkVueApp() {
            vueCheckCount++;
            const app = document.getElementById('app');
            
            if (app && app.children.length > 0) {
                addDebugMessage('✅ Vue 应用已挂载', 'success');
                // 隐藏调试信息
                setTimeout(() => {
                    debugInfo.style.display = 'none';
                }, 3000);
                return true;
            } else if (vueCheckCount < 50) {
                setTimeout(checkVueApp, 200);
                if (vueCheckCount % 5 === 0) {
                    addDebugMessage(`⏳ 等待 Vue 应用挂载... (${vueCheckCount}/50)`, 'warning');
                }
            } else {
                addDebugMessage('❌ Vue 应用挂载超时', 'error');
            }
        }
        
        window.onload = function() {
            addDebugMessage('✅ 页面加载完成', 'success');
            checkAppContainer();
            
            // 开始检查 Vue 应用
            setTimeout(checkVueApp, 1000);
        };
    </script>
    
    <!-- 加载 JavaScript 文件 -->
    <script type="module" crossorigin src="./ionic/js/chunk-ionic.b2c76632.js"></script>
    <script type="module" crossorigin src="./ionic/js/chunk-vendors.9a24fe1a.js"></script>
    <script type="module" crossorigin src="./ionic/js/app.39054f79.js"></script>
    
    <script>
        // 额外的调试信息
        setTimeout(() => {
            addDebugMessage('📊 检查全局对象...');
            
            if (typeof Vue !== 'undefined') {
                addDebugMessage('✅ Vue 可用', 'success');
            } else {
                addDebugMessage('❌ Vue 不可用', 'error');
            }
            
            if (typeof window.Ionic !== 'undefined') {
                addDebugMessage('✅ Ionic 可用', 'success');
            } else {
                addDebugMessage('❌ Ionic 不可用', 'error');
            }
            
            // 检查应用状态
            const app = document.getElementById('app');
            if (app) {
                addDebugMessage(`📱 应用容器内容: ${app.innerHTML.length > 0 ? '有内容' : '空'}`, app.innerHTML.length > 0 ? 'success' : 'warning');
            }
        }, 2000);
    </script>
</body>
</html>